<template>
  <div class="comment">
    <table-title
        title="居民留言"
        :show-button="false">
    </table-title>

    <el-table
        border
        stripe
        :data="tableData"
        v-loading="loading">
      <el-table-column align="center" type="index" label="序号" width="64"></el-table-column>
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          {{ userObjectData[scope.row.userId].tuserName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="留言内容">
        <template slot-scope="scope">
          {{
            scope.row.content && scope.row.content.substr(0, 52)
          }}{{ scope.row.content && scope.row.content.length > 52 ? '...' : '' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="留言时间">
        <template slot-scope="scope">
          {{ scope.row.time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否回复">
        <template slot-scope="scope">
          {{ scope.row.reply ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="回复人">
        <template slot-scope="scope">
          <template v-for="(item, index) in scope.row.replyId">
            <span :key="`${item}-${index}`">
              {{ userObjectData[item].tuserName }}<template v-if="index < scope.row.replyId.length - 1">，</template>
            </span>
          </template>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
              type="primary"
              slot="reference"
              icon="el-icon-chat-dot-square"
              size="mini"
              @click="editDetail(scope.row.commentId)">
          </el-button>

          <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              size="mini"
              @click="deleteDetail(scope.row.commentId)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-count="totalCount"
        :current-page="currentPage"
        @current-change="changePage"
        :hide-on-single-page="true"
        class="page">
    </el-pagination>

    <!-- 回复 -->
    <el-dialog
        title="留言详情"
        :visible="commentId != -1"
        :center="true"
        :append-to-body="true"
        @close="closeDialog"
        width="860px">

      <comment-list v-if="commentId != -1"
                    :comment-id="commentId"
                    @change="onDialogCommentChange">
      </comment-list>
    </el-dialog>
  </div>
</template>
<script>
import TableTitle from "../../../components/TableTitle";
import CommentList from "../../../components/CommentList";
import modelUser from "../../../models/user";

export default {
  name: "Comment",
  components: {CommentList, TableTitle},
  data() {
    return {
      // 数据
      tableData: [
        /*{
          userId: 0,
          content: "",
          time: "",
          reply: true,
          replyId: 0,
          commentId: 0
        }*/
      ],
      commentId: -1,
      userObjectData: {},

      // 分页
      loading: false,
      currentPage: 1,
      totalCount: 1
    };
  },
  created() {
    /**
     * 获取数据
     */
    this.changePage(this.currentPage);
  },
  methods: {
    /**
     * 编辑
     */
    editDetail(id) {
      this.commentId = id;
    },

    closeDialog() {
      this.commentId = -1;
    },

    /**
     * 删除
     */
    deleteDetail(id) {
      this.$confirm("将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {

        this.axios.delete(this.$store.state.api + '/comment/del?ids=' + id)
            .then((response) => {
              if (response.data.code == 200) {
                this.$message({
                  type: response.data.data ? 'success' : 'error',
                  message: response.data.data ? '删除成功！' : '删除失败！'
                });
              }

              // 告诉父视图刷新
              this.changePage(1);
            })
            .catch((error) => {
              console.log(error);
            });

      });
    },

    /**
     * 获取数据
     *
     * @param val
     */
    changePage(val) {
      this.currentPage = val;
      const url = this.$store.state.api + '/comment/list?pageNum=' + this.currentPage + '&pageSize=15';
      this.axios.post(url, {})
          .then((response) => {
            if (response.data.code == 200) {
              // 获取用户数据
              modelUser.getUserObjectData().then((userObjectData) => {
                this.userObjectData = userObjectData;
                let records = response.data.data.records;
                let tableData = [];
                records.forEach((item) => {
                  let commentObj = JSON.parse(item.comment)
                  tableData.push({
                    userId: item.userId,
                    content: commentObj.comment.comment,
                    time: commentObj.comment.time,
                    // 是否回复
                    reply: commentObj.reply.length && commentObj.reply[0].userId,
                    replyId: [...new Set(commentObj.reply.map((item) => {
                      return item.userId
                    }))],
                    commentId: item.commentId
                  })

                });
                this.tableData = tableData;
                this.totalCount = response.data.data.pages;
                this.loading = false;
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
    },

    /**
     * 弹窗改变了
     */
    onDialogCommentChange() {
      this.changePage(this.currentPage);
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../../assets/less/base.less";

.comment {
  color: @fontColor;
  min-height: 100%;
  background: white;
}
</style>
